<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12" sm="6">
          <v-text-field v-model="data.title" counter="2" filled=true label="Filled"></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field v-model="data.phone" label="phone" counter maxlength="11" hint="请输入11位手机号" type="number"
            :rules="checkRulePhone" required success="phoneCheck"></v-text-field>
        </v-col>

      </v-row>
    </v-container>
  </v-form>
  <v-btn color="primary" text @click="submit">Submit</v-btn>
  <MeSnackbar v-model:snackbarShow="data.snackbarShow" :snackbarText="data.snackbarText"></MeSnackbar>
</template>
  
<script setup lang="ts">
import MeSnackbar from './MeSnackbar.vue'
import { onBeforeMount, reactive } from 'vue'
import { create } from 'domain';

let data = reactive<{
  title: String,
  description: String,
  phone: String,
  phoneCheck: boolean,
  snackbarShow: boolean,
  snackbarText: String|any
}>({
  title: 'Preliminary report',
  description: 'California is a state in the western United States',
  phone: '',
  phoneCheck: false,
  snackbarShow: false,
  snackbarText: ""
});
let checkRulePhone = [
  (v: string) => {
    if (!!v && /^(1)\d{10}$/.test(v)) {
      data.phoneCheck = true;
      return true;
    }
    data.phoneCheck = false
    return '手机号无效';
  }
]
function submit() {
  console.info('验证结果：', data.phoneCheck)
  if (!data.phoneCheck) {
    console.info('是否显示弹窗：', data.snackbarShow)
    data.snackbarText = '请输入手机号'
    data.snackbarShow = true
    return;
  }
  console.info('成功', data.phoneCheck)
}
</script>